import React, { Component } from 'react'
import { Toast } from 'antd-mobile'
import { NavBar, Item, Icon, Image, Button } from 'components'
import { post } from '../../../utils'

export default class Invoice extends Component<any, any> {

    public state = {
        val: ''
    }

    public render(): JSX.Element {
        const { returnDetail } = this.props
        const { val } = this.state
        return (
            <div className="invoice">
                <NavBar title={<div style={{ fontSize: '0.97rem', color: '#222' }}>填写发货单</div>} fixed={true} />
                <Item title={<div className="invoice_item_title invoice_fs76">包裹信息<span>*</span></div>} className="invoice_item" />
                <Item
                    title={<div className="invoice_item_title invoice_fs7">快递公司：<p>{(returnDetail.express && returnDetail.express.name) || '请选择快递公司'}</p></div>}
                    className="invoice_item"
                    link="/My/selectExpress"
                />
                <Item
                    title={<div className="invoice_item_title invoice_fs7 flex">快递单号：<input className="flex_1" value={val} onChange={this.handleVal} placeholder="请选择快递单号" /></div>}
                    className="invoice_item"
                    value={<div className="invoice_item_icon"><Icon type="scan" /></div>}
                />
                <div className="invoice_notice">
                    <p className="invoice_fs625">温馨提示:如您购买的商品发生退货时，第三方商品邮寄时，运费您可与商家确定，感谢您的理解与支持。</p>
                </div>
                <Item title={<div className="invoice_item_title invoice_fs76">包裹内信息</div>} className="invoice_item" />
                <Item
                    title={<div className="invoice_item_title invoice_fs7">服务单号：<p>{returnDetail.refund_no}</p></div>}
                    className="invoice_borderNone invoice_packageGoods"
                />
                <Item
                    title={<div className="invoice_item_title invoice_fs7">申请时间：<p>{returnDetail.create_time}</p></div>}
                    className="invoice_packageGoods"
                />
                <Item title={<div className="invoice_item_title invoice_fs76">商品信息</div>} className="invoice_item invoice_borderNone no_border" />
                <div className="invoice_goodsInfo ">
                    <div>
                        <Image src={returnDetail.order_goods && returnDetail.order_goods.pic} />
                    </div>
                    <div>
                        <div style={{ height: '2rem', overflow: 'hidden' }}>{returnDetail.order_goods && returnDetail.order_goods.short_title}</div>
                        <div>数量：{returnDetail.order_goods && returnDetail.order_goods.number}</div>
                    </div>
                </div>
                <div className="invoice_savebtn">
                    <Button className="invoice_savebtn_item" onClick={this.handleSend} disabled={((returnDetail.express && returnDetail.express.name) && val) ? false : true}>保存</Button>
                </div>
            </div>
        )
    }

    private handleVal = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({
            val: e.target.value
        })
    }

    private handleSend = () => {
        const { returnDetail, userInfo, history } = this.props
        const { val } = this.state
        post('orderapi/orderRefundInvoice', {
            userId: userInfo.id,
            id: returnDetail.id,
            kdcom: val,
            kdnum: returnDetail.express.code
        }).then((data: any) => {
            Toast.info('订单填写成功', 2)
            setTimeout(() => { history.goBack() }, 2000)
        })
    }
}